Create Your First Chart

This tutorial will guide you through creating your first visualization with Muze, from data loading to final rendering.

Setting Up Your Data

Supported Data Formats

Muze works with DataModel as its primary data source. You can load data in any of these formats:

• Delimiter separated values (CSV, TSV)
• Flat JSON structure
• Matrix of values (2D array)

Sample Dataset

Here's a sample from the Cars dataset we'll use in this tutorial:

Name	Miles_per_Gallon	Cylinders	Displacement	Horsepower	Weight_in_lbs	Acceleration	Year	Origin
chevrolet chevelle malibu	18	8	307	130	3504	12	1/1/1970	USA
buick skylark 320	15	8	350	165	3693	11.5	1/1/1970	USA
plymouth satellite	18	8	318	150	3436	11	1/1/1970	USA
amc rebel sst	16	8	304	150	3433	12	1/1/1970	USA

Creating a DataModel

1. Define Your Schema

The schema defines the characteristics of your data fields:

const schema = [
  {
    name: "Maker",
    type: "dimension",
  },
  {
    name: "Horsepower",
    type: "measure",
  },
];

2. Initialize DataModel

// Load the DataModel class
const DataModel = muze.DataModel;

// Parse the data
const parsedData = DataModel.loadDataSync(data, schema);

// Create DataModel instance
const dm = new DataModel(parsedData);

Building the Visualization

1. Create a Canvas

The canvas serves as a container for your visualization:

const { muze } = viz;
const canvas = muze.canvas();

// Attach DataModel to canvas
canvas.data(dm);

2. Configure the Layout

Define which fields appear on which axes:

canvas
  .rows(["Horsepower"]) // Y-axis
  .columns(["Maker"]); // X-axis

3. Set Dimensions

You can set the visualization size in two ways:

#chart {
  width: 500px;
  height: 300px;
}

canvas.width(500).height(300);

4. Render the Chart

Mount the visualization to a DOM element:

canvas.mount("#chart");

Complete Example

Here's a full implementation that puts everything together:

const { muze, getDataFromSearchQuery, env } = viz;
const DataModel = muze.DataModel;

const data = getDataFromSearchQuery();

// Declare and use RowField and ColumnField for clarity
const RowField = ["Horsepower"];
const ColumnField = ["Maker"];

muze
  .canvas()
  .data(dm)
  .rows(RowField)
  .columns(ColumnField)
  .mount("#chart");

Best Practices

• Always define a complete schema for your data
• Use appropriate field types (dimension/measure)
• Consider container size when setting dimensions
• Mount to a specific DOM element ID